// import { Space, Table, Tag,Button,
//     Pagination
// } from 'antd';
// import React from 'react';
// import style from './noticetable.module.css'

// const Noticetable = () => {
//     const columns = [
//         {
//             title: '序号',
//             dataIndex: 'id',
//             key: 'id',

//         },
//         {
//             title: '标题',
//             dataIndex: 'title',
//             key: 'title',
//         },
//         {
//             title: '发送范围',
//             dataIndex: 'size',
//             key: 'size',
//         },
//         {
//             title: '发送对象',
//             key: 'tags',
//             dataIndex: 'tags',
//             render: (_, { tags }) => (
//                 <>
//                     {tags.map((tag) => {
//                         let color = tag.length > 5 ? 'geekblue' : 'green';
//                         if (tag === '学生') {
//                             color = 'volcano';
//                         }
//                         return (
//                             <Tag color={color} key={tag}>
//                                 {tag.toUpperCase()}
//                             </Tag>
//                         );
//                     })}
//                 </>
//             ),
//         },
//         {
//             title: '发布者',
//             dataIndex: 'creater',
//             key: 'creater',
//         },

//         {
//             title: '发布时间',
//             dataIndex: 'createtime',
//             key: 'createtime',
//         },

//         {
//             title: '操作',
//             key: 'action',
//             className: 'table',
//             render: (_, record) => {
//                 return (<div className={style.table}>
//                     <Button type="primary" size="Large">
//                         删除
//                     </Button>
//                 </div>
//                 )
//             }
//         },
//     ];
//     const data = [
//         {
//             key: '1',
//             id: '1',
//             title: '关于防控疫情的通告',
//             size: '全部学校',
//             tags: ['学生', '家长'],
//             creater: '张三',
//             createtime: '2022-08-08 16:05',
//         },
//         {
//             key: '2',
//             id: '2',
//             title: '关于防控疫情的通告',
//             size: '全部学校',
//             tags: ['学生', '家长'],
//             creater: '张三',
//             createtime: '2022-08-08 16:05',
//         },
//         {
//             key: '3',
//             id: '3',
//             title: '关于防控疫情的通告',
//             size: '全部学校',
//             tags: ['学生', '家长'],
//             creater: '张三',
//             createtime: '2022-08-08 16:05',
//         },
//         {
//             key: '4',
//             id: '4',
//             title: '关于防控疫情的通告',
//             size: '全部学校',
//             tags: ['学生', '家长'],
//             creater: '张三',
//             createtime: '2022-08-08 16:05',
//         },
//         {
//             key: '5',
//             id: '5',
//             title: '关于防控疫情的通告',
//             size: '全部学校',
//             tags: ['学生', '家长'],
//             creater: '张三',
//             createtime: '2022-08-08 16:05',
//         },
//         {
//             key: '6',
//             id: '6',
//             title: '关于防控疫情的通告',
//             size: '全部学校',
//             tags: ['学生', '家长'],
//             creater: '张三',
//             createtime: '2022-08-08 16:05',
//         },
//         {
//             key: '7',
//             id: '7',
//             title: '关于防控疫情的通告',
//             size: '全部学校',
//             tags: ['学生', '家长'],
//             creater: '张三',
//             createtime: '2022-08-08 16:05',
//         },
//         {
//             key: '8',
//             id: '8',
//             title: '关于防控疫情的通告',
//             size: '全部学校',
//             tags: ['学生', '家长'],
//             creater: '张三',
//             createtime: '2022-08-08 16:05',
//         },
//         {
//             key: '9',
//             id: '9',
//             title: '关于防控疫情的通告',
//             size: '全部学校',
//             tags: ['学生', '家长'],
//             creater: '张三',
//             createtime: '2022-08-08 16:05',
//         },
//         {
//             key: '10',
//             id: '10',
//             title: '关于防控疫情的通告',
//             size: '全部学校',
//             tags: ['学生', '家长'],
//             creater: '张三',
//             createtime: '2022-08-08 16:05',
//         },
//         {
//             key: '11',
//             id: '11',
//             title: '关于防控疫情的通告',
//             size: '全部学校',
//             tags: ['学生', '家长'],
//             creater: '张三',
//             createtime: '2022-08-08 16:05',
//         },

//     ];
// const itemRender = (_, type, originalElement) => {
//     if (type === 'prev') {
//       return <a><p>上一页</p></a>;
//     }
//     if (type === 'next') {
//       return <a><p>下一页</p></a>;
//     }
//     return originalElement;
//   };
//   const onShowSizeChange = (current, pageSize) => {
//     console.log(current, pageSize);
//   };
//   const showTotal = (total) => {
//     return <text>共{total}条</text>
//   }

//     return(
//         <>
//              <div className={style.table}>
//     <Table
//         columns={columns} 
//         dataSource={data} 
//         pagination={
//             {
//                 onShowSizeChange:onShowSizeChange,
//                  total:20,
//                  showSizeChanger:true,
//                  defaultCurrent:1,
//                  defaultPageSize:5,
//                  pageSizeOptions:[5,10,20,30],
//                  showQuickJumper:true,
//                  showTotal:showTotal,
//                  itemRender:itemRender,
//             }
//         }
//        />
//         </div>      
//         </>
//        )

// };
// export default Noticetable;

import { PlusOutlined } from "@ant-design/icons"
// import { ProTable } from "@ant-design/pro-components"
import { Button, Menu, Space, Tag } from "antd"
import { useRef }from "react"
// import style from './noticetable.module.css'
// import request from "umi-request"
import { Outlet, Link } from "react-router-dom"

const columns = [
  {
    dataIndex: "index",
    valueType: "indexBorder",
    width: 48
  },
  {
    title: "标题",
    dataIndex: "title",
    copyable: true,
    ellipsis: true,
    tip: "标题过长会自动收缩",
    formItemProps: {
      rules: [
        {
          required: true,
          message: "此项为必填项"
        }
      ]
    }
  },
  {
    disable: true,
    title: "发送范围",
    dataIndex: "state",
    filters: true,
    onFilter: true,
    ellipsis: true,
    valueType: "select",
    valueEnum: {
      // all: { text: "超长".repeat(50) },
      open: {
        text: "全部学校",
        status: "Error"
      },
      closed: {
        text: "部分",
        status: "Success",
        disabled: true
      },
      processing: {
        text: "全校",
        status: "Processing"
      }
    }
  },
  {
    disable: true,
    title: "发送对象",
    dataIndex: "labels",
    search: false,
    renderFormItem: (_, { defaultRender }) => {
      return defaultRender(_)
    },
    render: (_, record) => (
      <Space>
        {record.labels.map(({ name, color }) => (
          <Tag color={color} key={name}>
            {name}
          </Tag>
        ))}
      </Space>
    )
  },
  {
    title: "发布者",
    dataIndex: "creater",
    // copyable: true,
    // ellipsis: true,
    formItemProps: {
      rules: [
        {
          required: true,
          message: "此项为必填项"
        }
      ]
    }
  },
  {
    title: "发布时间",
    key: "showTime",
    dataIndex: "created_at",
    valueType: "date",
    sorter: true,
    hideInSearch: true
  },
  {
    title: "发布时间",
    dataIndex: "created_at",
    valueType: "dateRange",
    hideInTable: true,
    search: {
      transform: value => {
        return {
          startTime: value[0],
          endTime: value[1]
        }
      }
    }
  },
  {
    title: "操作",
    valueType: "option",
    key: "option",
    render: (_,record) => [
      <a
        // key="editable"
        onClick={() => {
          // action?.startEditable?.(record.id)
          handleDel(record.id)
        }}
      >
        <p>删除</p>
      </a>,
      <a href={record.url} target="_blank" rel="noopener noreferrer" key="view">
        <p>查看详情</p>
      </a>,
      // <TableDropdown
      //   key="actionGroup"
      //   className={style.table}
      //   onSelect={() => action?.reload()}
      //   menus={[
      //     { key: "copy", name: "复制" },
      //     { key: "delete", name: "删除" }
      //   ]}
      // />
    ]
  }
]

const menu = (
  <Menu
    items={[
      {
        label: "1st item",
        key: "1"
      },
      {
        label: "2nd item",
        key: "1"
      },
      {
        label: "3rd item",
        key: "1"
      }
    ]}
  />
)
const itemRender = (_, type, originalElement) => {
  if (type === 'prev') {
    return <a><p>上一页</p></a>;
  }
  if (type === 'next') {
    return <a><p>下一页</p></a>;
  }
  return originalElement;
};
const onShowSizeChange = (current, size) => {
  // console.log(current, size);
};
const showTotal = (total, page) => {
  console.log(total);
  console.log(page);
  return <text>第{page[0]}-{page[1]}条/共{total}条</text>
}
// function List(){
//   const [data,setData] = useState([]);
//   useEffect((=>){

//   })
  //删除功能
const handleDel = (id) => {

}

//隐藏展开标签
const onDiscoll = () => {
  return(
    <div></div>
  )
}

const Noticetable = () => {
  const actionRef = useRef()
  return (
    <>
      <Outlet />
      {/* <ProTable
        columns={columns}
        actionRef={actionRef}
        className={style.table}
        cardBordered
        request={async (params = {}, sort, filter) => {
          console.log(sort, filter)
          return request("http://localhost:3000/src/api/table.json", {
            params
          })
        }}

        editable={{
          type: "single",
          // onDelete: onDelete,

        }}
        columnsState={{
          persistenceKey: "pro-table-singe-demos",
          persistenceType: "localStorage",
          onChange(value) {
            console.log("value: ", value)
          }
        }}
        rowKey="id"
        search={{
          labelWidth: "auto",
          collapseRender: onDiscoll,
          span: "2",
          filterType:'light'
        }}
        options={{
          setting: {
            listsHeight: 400
          }
        }}
        form={{
          // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
          syncToUrl: (values, type) => {
            if (type === "get") {
              return {
                ...values,
                created_at: [values.startTime, values.endTime]
              }
            }
            return values
          }
        }}
        pagination={{

          defaultPageSize: 5,
          onChange: (page) => console.log(page),
          onShowSizeChange: onShowSizeChange,
          showTotal: showTotal,
          showSizeChanger: true,
          pageSizeOptions: [5, 10, 20, 30],
          showQuickJumper: true,

          itemRender: itemRender,
        }}
        dateFormatter="string"
        toolBarRender={() => [
          <Link to="/addnotice"><Button key="button" icon={<PlusOutlined />} type="primary">
            新建
          </Button></Link>,

          // <Dropdown key="menu" overlay={menu}>
          //   <Button>
          //     <EllipsisOutlined />
          //   </Button>
          // </Dropdown>
        ]}
      /> */}
    </>
  )
}
export default Noticetable